<template>
	<image class="img1" src="https://build.gzwhir.com/zygzmr202410252905/appImages/my-img1.jpg" mode="widthFix"></image>
	<view class="main">
		<view class="name">卓雅(广州)美容管理咨询有限公司</view>
		<view class="item">
			<image class="item-l" src="@/static/images/my-icon6.png" mode=""></image>
			<view class="item-r">
				<view class="title">联系电话</view>
				<view class="tips">020-8888 8888</view>
			</view>
		</view>
		<view class="item">
			<image class="item-l" src="@/static/images/my-icon7.png" mode=""></image>
			<view class="item-r">
				<view class="title">联系邮箱</view>
				<view class="tips">12582636933@163.com</view>
			</view>
		</view>
		<view class="item">
			<image class="item-l" src="@/static/images/my-icon8.png" mode=""></image>
			<view class="item-r">
				<view class="title">联系地址</view>
				<view class="tips">广州市花都区绿港五街3号802房</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
</script>

<style lang="scss">
page{
	background: #f3f3f3;
}
.img1{
	width: 100%;
	display: block;
}
.main{
	width: 666rpx;
	border-radius: 20rpx;
	padding: 80rpx 40rpx;
	box-sizing: border-box;
	background: linear-gradient(to bottom, #f3f3f3, #fefefe, #fff);
	margin: -170rpx auto 0;
	.name{
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		margin-bottom: 80rpx;
	}
	.item{
		display: flex;
		align-items: baseline;
		border-bottom: 1px solid #e1e1e1;
		padding-bottom: 50rpx;
		margin-bottom: 50rpx;
		
		&:last-child{
			border-bottom: none;
			padding-bottom: 0;
			margin-bottom: 0;
		}
		
		.item-l{
			width: 28rpx;
			height: 28rpx;
		}
		.item-r{
			flex: 1;
			margin-left: 30rpx;
			.title{
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
			}
			.tips{
				font-size: 28rpx;
				color: #888;
			}
		}
	}
}
</style>
